<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('关键条款') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('条款类型')" prop="clauseType">
        <el-select v-model="queryParams.clauseType" :placeholder="$t('条款类型')">
          <el-option
            v-for="dict in lpaTypeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('提醒人')" prop="remindUserIdStr">
        <UserSelect v-model="queryParams.remindUserIdStr" :placeholder="$t('提醒人')" />
      </el-form-item>
      <el-form-item :label="$t('基金名称')" prop="fundId">
        <MainBodySelect
          v-model="queryParams.fundId"
          parameters="fund"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['fund:investorLpa:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['fund:investorLpa:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['fund:investorLpa:edit']"
          type="success"
          icon="el-icon-setting"
          size="mini"
          @click="openReminder"
        >{{ $t("默认提醒人") }}</el-button>
      </el-col>
    </el-row>

    <div v-if="!isEmpty(fundInvestorLpaList)" class="mt20">
      <div v-for="(v, k) in fundInvestorLpaList" :key="k" v-loading="loading" class="mb10 mt10">
        <div class="term-tit" style="cursor: pointer;">
          <i class="el-icon-menu" />{{ $t(k) }}<i class="el-icon-circle-plus-outline pointer" @click="updateAddHandle(v)" />
        </div>
        <div v-for="j in v" :key="j.id" class="term-remark pointer">
          <div
            class="remark"
            style="cursor: pointer;"
            @click="updateHandle(j)"
            v-html="j.clauseContent"
          />
          <div class="bottom">
            <div class="left" style="cursor: pointer;" @click="updateHandle(j)">
              <span>
                {{ $t('提醒时间') }}: {{ parseTime(j.remindTime, '{y}-{m}-{d} {h}:{i}') || '无' }}
              </span>
              <span>
                {{ $t('提醒人') }}: {{ j.userName || '无' }}
              </span>
              <span class="tag" :class="tagColor">{{ $t(lpaTypeFormat(j)) }}</span>
            </div>
            <div class="del" style="cursor: pointer;" @click="deleteHandle(j)"><i class="el-icon-delete" />{{ $t('删除') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="noneData">
      <div v-loading="loading">
        <svg-icon icon-class="none" class-name="none-icon" />
        <p>{{ $t('暂无数据') }}</p>
      </div>
    </div>

    <!-- 添加或修改关键条款对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundInvestorLpaForm ref="fundInvestorLpaForm" />
    </el-dialog>
    <el-dialog :title="$t('默认提醒人')" :visible.sync="reminderOpen" width="600" style="height: 350px; width: 600px; margin: auto !important;" :close-on-click-modal="false" custom-class="dialogForm" append-to-body>
      <fundInvestorLpaReminder ref="fundInvestorLpaReminder" />
    </el-dialog>
  </div>
</template>

<script>
import {
  delFundInvestorLpa,
  findListLpaTreeTerms
} from '@/api/fund/investorLpa/fundInvestorLpa'
import fundInvestorLpaForm from './fundInvestorLpaForm.vue'
import MainBodySelect from '@/components/MainBodySelect/index.vue'
import fundInvestorLpaReminder from '@/views/fund/investorLpa/fundInvestorLpaReminder.vue'
export default {
    components: {
      MainBodySelect,
      fundInvestorLpaForm,
      fundInvestorLpaReminder
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          tagColor: 'WCF',
          // 关键条款表格数据
          fundInvestorLpaList: [],
          // 弹出层标题
          title: '关键条款',
          // 是否显示弹出层
          formOpen: false,
          reminderOpen: false,
          lpaTypeOptions: [],
          // 查询参数
          queryParams: {
              clauseType: undefined,
              remindUserId: undefined,
              remindUserIdStr: undefined,
              fundInvestorId: undefined,
              lpId: this.$route.query.lpId,
              fundId: undefined,
              number: undefined
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {}
      }
  },
  created() {
    this.getDicts('lpa_type').then(response => {
      this.lpaTypeOptions = response.data
    })
      this.getList()
  },
  methods: {
    /** 查询关键条款列表 */
    getList() {
        this.loading = true
        findListLpaTreeTerms(this.queryParams).then(response => {
            this.fundInvestorLpaList = response.data
            this.loading = false
        }).catch(() => {
            this.loading = false
        })
    },
    // 类型字典回显
    lpaTypeFormat(row) {
      return this.selectDictLabel(this.lpaTypeOptions, row.clauseType)
    },
    isTriggerDict(value) {
      var datas = this.isTriggerOption
      var actions = []
      Object.keys(datas).map((key) => {
        if (datas[key].dictValue === ('' + value)) {
          var temp = datas[key].dictLabel
          actions.push(this.$t(this.isEmpty(temp) ? '' : temp.replace('触发-', '')))
          return false
        }
      })
      return actions.join('')
    },
    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            clauseType: undefined,
            clauseContent: undefined,
            cron: undefined,
            remindTime: undefined,
            reminderFrequency: undefined,
            status: '0',
            frequencyCronValue: undefined,
            remindUserId: undefined,
            fundInvestorId: undefined,
            lpId: undefined,
            fundId: undefined,
            createBy: undefined,
            updateBy: undefined,
            createTime: undefined,
            updateTime: undefined,
            delFlag: undefined,
            number: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.$nextTick(() => {
            this.$refs.fundInvestorLpaForm.init(null)
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.fundInvestorLpaForm.init(row)
        })
    },
    /** 修改按钮操作 */
    updateAddHandle(v) {
      var item = v[0]
      console.log('item', item)
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.fundInvestorLpaForm.init(item)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(() => {
            return delFundInvestorLpa(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(() => {
            this.loading = false
        })
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.downLoadExcel('/lpa/fundInvestorLpa/reportExport', this.queryParams)
    },
    // 设置默认提醒人
    openReminder() {
      this.reminderOpen = true
      this.$nextTick(() => {
        this.$refs.fundInvestorLpaReminder.init()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tag{
  font-size: 11px;
  overflow: hidden;
  padding: 3px 15px;
  border-radius: 15px;
}
.WCF{
  background: #CFCFD2;
  color: #434245;
}
.YCL{
  background: linear-gradient(to right,#69CD8F,#89E4BF);
  color: #fff;
}
.WCL{
  background: linear-gradient(to right,#E58F43,#F1B94A);
  color: #fff;
}
.term-tit{
  font-size: 15px;
  color: #333;
  text-align: left;
  line-height: 21px;
  padding-right: 16px;
  font-weight: 600;
  margin: 10px 0;
  display: flex;
  align-items: center;
  column-gap: 4px;
  i{
    color: #409EFF;
  }
}
.term-remark{
  position: relative;
  margin: 0 30px 20px;
  overflow: hidden;
  border-bottom: 1px solid #E7E8EC;
  padding-bottom: 20px;
  .remark{
    line-height: 20px;
    margin: 0;
    white-space: pre-wrap;
    font-size: 13px;
    color: #000;
    // white-space: normal;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .left {
    color: rgba(0,0,0, .65);
    font-size: 12px;
    span{
      margin-right: 10px;
    }
  }
  .del{
    color: #1890ff;
    font-size: 12px;
    i{
      margin-right:4px;
    }
  }
}
.mt10{
  margin-top: 10px;
}
.mt20{
  margin-top: 20px;
}
.noneData{
  margin: 50px 0;
}
</style>
